<template>
  <div class="AbnormalOrders">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="活动编号" :label-col="{ span: 5}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="[
          'activityNumber',
          {rules: [{ required: true, message: '请输入活动编号!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="设备编号" :label-col="{ span: 5}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="[
          'equipmentNumber',
          {rules: [{ required: true, message: '请输入设备编号!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="异常类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-select
                v-decorator="[
          'exceptionTypes',
          {rules: [{ required: true, message: '请选择异常类型!' }]}
        ]"
                placeholder="全部"
              >
                <a-select-option value="1">全部</a-select-option>
                <a-select-option value="2">识别出未知商品</a-select-option>
                <a-select-option value="3">商品价格异常</a-select-option>
                <a-select-option value="4">未知商品与商品价格异常</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="创建时间" :label-col="{ span: 5 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-range-picker
                style="width: 100%"
                v-decorator="['range-time-picker', rangeConfig]"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
          <a-col :span="7" :style="{ textAlign: 'right' }">
            <a-button type="primary">查询</a-button>
            <a-button type="dashed" style="margin:0 2%">导出</a-button>
            <a-button htmlType="reset">重置</a-button>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="24">
            <p>规则说明：</p>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="24">
            <p>1.异常订单模块是有系统主动帮您进行异常订单甄别，帮你止损的模块</p>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="24">
            <p>2.异常订单为系统发现订单中有未知商品等异常，暂时还未向用户进行扣费的订单，待您点击编辑按钮，按照操作流程处理完后，系统将从新进行处理扣费。</p>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="24">
            <p>3.为了保证用户的体验，如果异常单 7 天未进行处理则系统将按照未知或未修改价格自动进行提交向用户扣费。</p>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%">
      <a-badge count="24" :numberStyle="{backgroundColor: 'rgb(255,51,153)'} "></a-badge>
      <a-tabs defaultActiveKey="1" @change="callback">
        <a-tab-pane tab="待处理" key="1">
          <a-table
            :columns="columns"
            :dataSource="data"
            :pagination="pagination"
            @change="handleTableChange"
          >
            <template slot="operation" slot-scope="text,record">
              <span class="blue" @click="detailInfo(text,record)">详情</span>
              <!-- logisticsModal -->
              <span class="blue" @click="logisticsModal()">编辑</span>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane tab="已处理" key="2" forceRender>
          <a-table
            :columns="columnsYet"
            :dataSource="dataYet"
            :pagination="paginationYet"
            @change="TableYet"
          >
            <template slot="operation" slot-scope="text,record">
              <div class="blue" @click="detailInfo(text,record)">详情</div>
              <!-- logisticsModal -->
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-modal
      title="异常订单处理流程"
      :visible="editVisible"
      @ok="editOk"
      @cancel="editCancel"
      :width="800"
      okText="提交"
    >
      <p>模板中的商品</p>
      <p>黑白盒子、红绿盒子、棕红盒子、康师傅红烧牛肉面160g、康师傅老坛酸菜牛肉面桶装82.5g、康师傅3+2苏打饼干蓝莓味125g、可口可乐红盖瓶装500ml、农夫山泉矿泉水550ml</p>
      <hr>
      <p style="margin-top:2%">未知商品处理流程</p>
      <a-steps direction="vertical" size="small" :current="0">
        <a-step>
          <template slot="title">第一步：查找订单中有哪些未知商品。</template>
        </a-step>
        <a-step>
          <template slot="title">第二步：查看“未知”商品是否在我的商品库中，如不在请进行添加。</template>
          <template slot="description">
            <a-button>查看</a-button>
          </template>
        </a-step>
        <a-step>
          <template slot="title">第三步：“未知”商品还在该设备继续售卖的话，请将“未知”商品添加到模板中。</template>
          <template slot="description">
            <a-button>添加</a-button>
          </template>
        </a-step>
        <a-step>
          <template slot="title">第四步：点击“提交”按钮，将订单提交至系统进行重新识别结算。</template>
        </a-step>
      </a-steps>
    </a-modal>
    <a-modal :visible="logisticsVisible" @ok="logisticsOk" @cancel="logisticsCancel" :width="800">
      <template slot="title">
        <div>
          <span>修改物流</span>
          <span style="color:red">*</span>
          <span>物流信息仅支持一次更正，请仔细填写并核对</span>
        </div>
      </template>
      <template slot="footer">
        <a-button key="back" @click="logisticsCancel">取消</a-button>
        <a-button class="save">保存</a-button>
        <a-button key="submit" type="primary" @click="logisticsOk">确定</a-button>
      </template>
      <a-table
        :columns="columnsLogistics"
        :dataSource="dataLogistics"
        :pagination="false"
        :rowKey="record => record.orderId"
      >
        <template slot="logisticsMode">
          <a-select defaultValue="物流发货" style="width: 120px" disabled>
            <a-select-option :value="0">物流发货</a-select-option>
          </a-select>
        </template>
        <template slot="logisticsCompany">
          <a-select defaultValue="顺风快递" style="width: 120px">
            <a-select-option :value="0">顺风快递</a-select-option>
          </a-select>
        </template>
        <template slot="trackingNumber">
          <a-input placeholder="请输入" value="129309203948290"/>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: "序号",
    dataIndex: "serialNumber",
    scopedSlots: { customRender: "serialNumber" },
    align: "center"
  },
  {
    title: "活动ID",
    dataIndex: "activityId",
    scopedSlots: { customRender: "activityId" },
    align: "center"
  },
  {
    title: "创建时间",
    dataIndex: "creationTime",
    scopedSlots: { customRender: "creationTime" },
    align: "center"
  },
  {
    title: "设备编号",
    dataIndex: "facilityNumber",
    scopedSlots: { customRender: "facilityNumber" },
    align: "center"
  },
  {
    title: "所属商家",
    dataIndex: "agent",
    scopedSlots: { customRender: "agent" },
    align: "center"
  },
  {
    title: "异常原因",
    dataIndex: "anomalousCause",
    scopedSlots: { customRender: "anomalousCause" },
    align: "center"
  },
  {
    title: "订单编号",
    dataIndex: "orderNumber",
    scopedSlots: { customRender: "orderNumber" },
    align: "center"
  },
  {
    title: "状态",
    dataIndex: "status",
    scopedSlots: { customRender: "status" },
    align: "center"
  },
  {
    title: "是否超时",
    dataIndex: "isOvertime",
    scopedSlots: { customRender: "isOvertime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];

const columnsYet = [
  {
    title: "序号",
    dataIndex: "serialNumber",
    scopedSlots: { customRender: "serialNumber" },
    align: "center"
  },
  {
    title: "活动ID",
    dataIndex: "activityId",
    scopedSlots: { customRender: "activityId" },
    align: "center"
  },
  {
    title: "创建时间",
    dataIndex: "creationTime",
    scopedSlots: { customRender: "creationTime" },
    align: "center"
  },
  {
    title: "设备编号",
    dataIndex: "facilityNumber",
    scopedSlots: { customRender: "facilityNumber" },
    align: "center"
  },
  {
    title: "所属商家",
    dataIndex: "agent",
    scopedSlots: { customRender: "agent" },
    align: "center"
  },
  {
    title: "异常原因",
    dataIndex: "anomalousCause",
    scopedSlots: { customRender: "anomalousCause" },
    align: "center"
  },
  {
    title: "订单编号",
    dataIndex: "orderNumber",
    scopedSlots: { customRender: "orderNumber" },
    align: "center"
  },
  {
    title: "状态",
    dataIndex: "status",
    scopedSlots: { customRender: "status" },
    align: "center"
  },
  {
    title: "是否超时",
    dataIndex: "isOvertime",
    scopedSlots: { customRender: "isOvertime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];

const columnsLogistics = [
  {
    title: "包裹",
    dataIndex: "parcel",
    scopedSlots: { customRender: "parcel" },
    align: "center"
  },
  {
    title: "商品数/数量",
    dataIndex: "goodsNumber",
    scopedSlots: { customRender: "goodsNumber" },
    align: "center"
  },
  {
    title: "物流方式",
    dataIndex: "logisticsMode",
    scopedSlots: { customRender: "logisticsMode" },
    align: "center"
  },
  {
    title: "物流公司",
    dataIndex: "logisticsCompany",
    scopedSlots: { customRender: "logisticsCompany" },
    align: "center"
  },
  {
    title: "物流单号",
    dataIndex: "trackingNumber",
    scopedSlots: { customRender: "trackingNumber" },
    align: "center"
  }
];
const data = [
  {
    key: "1"
  }
];

const dataYet = [
  {
    key: "1"
  }
];

const dataLogistics = [
  {
    key: 1
  }
];
export default {
  name: "AbnormalOrders",
  data() {
    return {
      form: this.$form.createForm(this),
      rangeConfig: {
        rules: [
          { type: "array", required: true, message: "Please select time!" }
        ]
      },
      data,
      columns,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["2", "4", "8", "10", "12"],
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        },
        pageSize: 2,
        defaultCurrent: 1,
        current: 1,
        total: 5
      },
      paginationYet: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["2", "4", "8", "10", "12"],
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        },
        pageSize: 2,
        defaultCurrent: 1,
        current: 1,
        total: 5
      },
      visible: false,
      editVisible: false,
      logisticsVisible: false,
      columnsLogistics,
      dataLogistics,
      columnsYet,
      dataYet
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleSearch(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        console.log("error", error);
        console.log("Received values of form: ", values);
      });
    },
    callback(key) {
      console.log(key);
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.getfindPage();
    },
    TableYet(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.getfindPage();
    },
    editModal() {
      this.editVisible = true;
    },
    editOk(e) {
      this.editVisible = false;
    },
    editCancel(e) {
      this.editVisible = false;
    },

    logisticsModal() {
      this.logisticsVisible = true;
    },
    logisticsOk(e) {
      this.logisticsVisible = false;
    },
    logisticsCancel(e) {
      this.logisticsVisible = false;
    },

    // // 订单详情跳页传ID
    detailInfo(posId) {
      var editId = posId;
      this.$store.commit("editId", editId);
      this.$router.push({
        path: "/home/orderadmin/abnormalorders/abnormaldetails"
      });
    }
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.AbnormalOrders {
  width: 100%;
}
.save:hover {
  border: 1px solid rgb(24, 144, 255);
  color: rgb(24, 144, 255);
}
</style>